<template>
  <div>
    <div class="foot">
      <ul>
        <router-link tag="li" to="/home" class="lis-1"></router-link>
        <router-link tag="li" to="/branch" class="lis-3"></router-link>
        <router-link tag="li" to="/shop" class="lis-4"></router-link>
        <router-link tag="li" to="/my" class="lis-5"></router-link>
      </ul>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.foot {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: #fff;
}
.foot ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.foot ul li {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.foot ul .lis-1 {
  background: url(../../public/assets/images/1.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-2 {
  background: url(../../public/assets/images/2.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-3 {
  background: url(../../public/assets/images/3.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-4 {
  background: url(../../public/assets/images/4.png) no-repeat;
  background-size: 25px 35px;
  background-position: 15px 0;
}
.foot ul .lis-5 {
  background: url(../../public/assets/images/5.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}

.foot ul .lis-1.router-link-active {
  background: url(../../public/assets/images/1s.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-2.router-link-active {
  background: url(../../public/assets/images/2s.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-3.router-link-active {
  background: url(../../public/assets/images/3s.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
.foot ul .lis-4.router-link-active {
  background: url(../../public/assets/images/4s.png) no-repeat;
  background-size: 25px 35px;
  background-position: 15px 0;
}
.foot ul .lis-5.router-link-active {
  background: url(../../public/assets/images/5s.png) no-repeat;
  background-size: 20px 35px;
  background-position: 15px 0;
}
</style>